<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script></script>
<script>
    import E from 'wangeditor'

    import ImageExtends from './imageExtends/index.js'
    // import LinkExtends from './linkExtends/index.js'
    export default {
        components: {

        },
        computed: {
            containerStyle() {
                let _s = ``;
                _s += `height:${this.height}px;`;
                return _s;
            },
        },
        props: {
            value: {
                type: String,
                default: ""
            },
            height: {
                type: Number,
                default: 200
            },
            matchList: {
                type: Array,
                default: []
            },
        },

        data() {
            return {
                // quill: null,
                content: "",

            };
        },
        methods: {

            initE() {
                const editor = new E('#toolbar-container', '#text-container')
                // 提示
                editor.config.customAlert = (s, t) => {
                    switch (t) {
                        case 'success':
                            this.$vFN.Tools.messageError(s);
                            break
                        case 'info':
                            this.$vFN.Tools.messageError(s);
                            break
                        case 'warning':
                            this.$vFN.Tools.messageError(s);
                            break
                        case 'error':
                            this.$vFN.Tools.messageError(s);
                            break
                        default:
                            this.$vFN.Tools.messageError(s);
                            break
                    }
                }
                // 配置行高
                editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3']
                // 字号
                editor.config.fontSizes = {
                    'x-small': {
                        name: '10px',
                        value: '1'
                    },
                    'small': {
                        name: '13px',
                        value: '2'
                    },
                    'normal': {
                        name: '16px',
                        value: '3'
                    },
                    'large': {
                        name: '18px',
                        value: '4'
                    },
                    'x-large': {
                        name: '24px',
                        value: '5'
                    },
                    'xx-large': {
                        name: '32px',
                        value: '6'
                    },
                    'xxx-large': {
                        name: '48px',
                        value: '7'
                    },
                }
                // zindex
                editor.config.zIndex = 1
                // 设置编辑区域高度为 500px
                // editor.config.height = this.height
                // 配置 onchange 回调函数
                editor.config.onchange = (html) => {
                    console.error("editor",editor.matchList)
                    this.$emit("update:matchList",JSON.parse(JSON.stringify(editor.matchList)))
                    
                    // console.error(this.returnResources(editor.txt.getJSON(),null))

                    
                    this.$emit('input', html);
                    this.content = html
                }

                // 注册菜单
                E.registerMenu('ImageExtends', ImageExtends)
                // E.registerMenu('LinkExtends', LinkExtends)


                // 配置菜单栏，删减菜单，调整顺序
                editor.config.menus = [
                    'head',
                    'bold',
                    'fontSize',
                    // 'fontName',
                    'italic',
                    'underline',
                    'strikeThrough',
                    'indent',
                    'lineHeight',
                    'foreColor',
                    'backColor',
                    'link',
                    'list',
                    // 'todo',
                    'justify',
                    'quote',
                    // 'emoticon',
                    'image',
                    // 'video',
                    // 'table',
                    // 'code',
                    'splitLine',
                    'undo',
                    'redo',
                ]


                // 关闭全屏
                editor.config.showFullScreen = false

                editor.create();
                editor.matchList = this.matchList;


                let _content = this.value
                if (!_content) {
                    _content = ""
                }
                this.content = _content;
                editor.txt.html(_content)
            },
           
           
        },

        mounted() {

            this.initE();

        },
        beforeCreate() {},
    };
</script>